<template>
  <div class="services_list">
    <div class="one">
      <div class="position">
        <span>地理位置</span>
        <el-input v-model="input1" placeholder="请输入内容"></el-input>
        <el-button>地理查询</el-button>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="adress" label="地点" width="310">
          </el-table-column>
        </el-table>
      </div>
      <div class="longitude">
        <span>经度</span>
        <el-input v-model="input2" placeholder="请输入内容"></el-input>
        <el-button>点击定位</el-button>
      </div>
      <div class="longitude">
        <span>纬度</span>
        <el-input v-model="input3" placeholder="请输入内容"></el-input>
        <el-button>坐标定位</el-button>
      </div>
    </div>
    <div class="two_title">范围分析</div>
    <div class="two">
      <div class="radius">
        <span>自动分析半径</span>
        <el-input v-model="input4" placeholder="请输入内容"></el-input>
        <span>米</span>
      </div>
      <el-button style="width:200px;margin-bottom:10px">自动分析区域</el-button>
      <el-button style="width:200px;margin-left:0;">手动绘制分析区域</el-button>
    </div>
    <div class="three">
      <div class="name">
        <span>名称</span>
        <el-input v-model="input5" placeholder="请输入内容"></el-input>
      </div>
      <div class="category">
        <span>类别</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="tab">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="实况" name="first">
            <div class="element">
              <span>要素</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="time1">
              <span>开始</span>
              <el-date-picker v-model="value1" style="width:120px" type="date" placeholder="选择日期">
              </el-date-picker>
              <el-time-select v-model="values1" style="width:65px" :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00'
              }" placeholder="选择时间">
              </el-time-select>
              <span>时</span>
            </div>
            <div class="time2">
              <el-checkbox v-model="checked"></el-checkbox>
              <span>至</span>
              <el-date-picker v-model="value2" style="width:120px" type="date" placeholder="选择日期">
              </el-date-picker>
              <el-time-select v-model="values2" style="width:65px" :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '23:00'
              }" placeholder="选择时间">
              </el-time-select>
              <span>时</span>
            </div>
            <el-button>实况分析</el-button>
          </el-tab-pane>
          <el-tab-pane label="预报" name="second">
            <div class="date">
              <span>日期</span>
              <el-date-picker v-model="value3" type="date" placeholder="选择日期">
              </el-date-picker>
            </div>
            <div class="times">
              <span>时次</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="ageing">
              <span>时效</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="button">
              <el-button>区域预报</el-button>
              <el-button>雷达图</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="地理条件" name="third">
            <div class="layer">
              <span>选择图层</span>
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in options5" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <el-button>地理分析</el-button>
          </el-tab-pane>
        </el-tabs>
        <el-button>应急确认</el-button>
      </div>
    </div>
    <div class="four_title">产品制作</div>
    <div class="four">
      <div class="check">
        <el-checkbox v-model="checked1"></el-checkbox>
        <span>是否附图</span>
      </div>
      <div class="four_time">
        <span>产品期数</span>
        <el-input v-model="input7" placeholder="请输入内容"></el-input>
      </div>
      <div class="button">
        <el-button>生成产品</el-button>
        <el-button>模板编辑</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input1: '村',
      input2: '',
      input3: '',
      input4: '5000',
      input5: '村气象和洪水灾害',
      input6: '5000',
      input7: '11',
      tableData: [{
        adress: '',
      }],
      options1: [{
        value: '选项1',
        label: '气象和洪水灾害'
      }],
      options2: [{
        value: '选项1',
        label: '降水'
      }],
      options3: [{
        value: '选项1',
        label: '20'
      }],
      options4: [{
        value: '选项1',
        label: '24'
      }],
      options5: [{
        value: '选项1',
        label: '村庄'
      }],
      value: '选项1',
      activeName: 'first',
      value1: '',
      value2: '',
      value3: '',
      values1: '',
      values2: '',
      checked: true,
      checked1: true
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>
<style scoped lang="less">
.services_list {
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 10px;
  box-sizing: border-box;
}

.services_list .one {
  width: 100%;
  border: 1px solid;
  padding: 5px 20px;
  box-sizing: border-box;
  margin-bottom: 10px;

  .position {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .el-input {
      width: 150px;
    }
  }

  .table {
    width: 100%;
    height: 100px;
    border: 1px solid;
    margin-bottom: 10px;
  }

  .longitude {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .el-input {
      width: 150px;
    }
  }
}

.services_list .two {
  width: 100%;
  border: 1px solid;
  padding: 5px 30px;
  box-sizing: border-box;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .radius {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .el-input {
      width: 170px;
    }
  }
}

.services_list .three {
  width: 100%;
  border: 1px solid;
  padding: 5px 30px;
  box-sizing: border-box;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .name {
    width: 210px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .el-input {
      width: 170px;
    }
  }

  .category {
    width: 210px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .el-select {
      width: 170px;
    }
  }

  .tab {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .el-button {
      margin-top: 10px;
    }

    /deep/ .el-tabs__content {
      width: 290px;
      border: 1px solid;
      height: 220px;

      .el-tab-pane {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .element {
          width: 250px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          margin-top: 20px;

          .el-select {
            width: 210px;
          }
        }

        .time1,
        .time2 {
          width: 250px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
        }

        .el-button {
          margin-top: 10px;
        }

        .date,
        .times,
        .ageing {
          width: 250px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
        }

        .button {
          width: 200px;
          display: flex;
          justify-content: space-between;
        }

        .layer {
          width: 260px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;

          .el-select {
            width: 200px;
          }
        }
      }
    }
    /deep/ .el-tabs__header {
      margin: 0;
    }

  }
}
.services_list .four{
  width: 100%;
  border: 1px solid;
  padding: 5px 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .check{
    width: 100%;
  }
  .four_time,.button{
    width: 260px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .el-input{
      width: 200px;
    }
  }
}
</style>
